<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星际坐标未找到 🌠 404</title>
    <link rel="stylesheet" href="../assets/css/tailwind.output.css">
    <style>
        .twinkle {
            animation: twinkle 2s linear infinite;
        }

        @keyframes twinkle {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }
    </style>
</head>
<body class="h-screen flex items-center justify-center bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">
<div class="container mx-auto text-center">
    <div class="flex justify-center mb-8">
        <svg class="w-48 h-48 twinkle text-gray-300" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="4"></circle>
            <path d="M12 2v12M17.2 17.2l.6.6"></path>
            <line x1="22.8" y1="22.8" x2="16.8" y2="16.8"></line>
            <line x1="2.2" y1="2.2" x2="8.2" y2="8.2"></line>
        </svg>
    </div>
    <h1 class="text-6xl font-bold text-white mb-4">404</h1>
    <h2 class="text-3xl text-white mb-8">星际坐标未找到，您的探索似乎偏离了航道！🌌</h2>
    <p class="text-white mb-6">看来这个页面已经被黑洞吞噬了，不如返回安全的基地重新出发？</p>
    <a href="/" class="error-href-404">返回主页</a>
</div>
</body>
</html>